<template>
  <!-- 只保留内容区 -->
  <div :class="styles['welcome-section']">
    <div :class="styles['welcome-content']">
      <div :class="styles['welcome-text']">
        <div :class="styles['welcome-greeting']">
          <span :class="styles['greeting-icon']">👋</span>
          <span :class="styles['greeting-text']">欢迎回来</span>
        </div>
        <h1 :class="styles['welcome-name']">{{ user?.name || user?.username }}</h1>
        <p :class="styles['welcome-subtitle']">今天也要加油学习哦！</p>
      </div>
      <div :class="styles['welcome-stats']">
        <div :class="styles['stat-item']">
          <span :class="styles['stat-number']">5</span>
          <span :class="styles['stat-label']">今日任务</span>
        </div>
        <div :class="styles['stat-item']">
          <span :class="styles['stat-number']">3</span>
          <span :class="styles['stat-label']">待完成</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 公告轮播区域 -->
  <div :class="styles['announcement-carousel']">
    <div :class="styles['carousel-header']">
      <h3 :class="styles['carousel-title']">📢 公告栏</h3>
      <div :class="styles['carousel-controls']">
        <button :class="styles['carousel-btn']" @click="prevAnnouncement">‹</button>
        <span :class="styles['carousel-indicator']">{{ currentAnnouncementIndex + 1 }} / {{ announcements.length
        }}</span>
        <button :class="styles['carousel-btn']" @click="nextAnnouncement">›</button>
      </div>
    </div>
    <div :class="styles['carousel-content']">
      <div v-for="(announcement, index) in announcements" :key="announcement.id"
        :class="[styles['carousel-item'], { [styles['active']]: index === currentAnnouncementIndex }]">
        <div :class="styles['carousel-icon']">{{ announcement.icon }}</div>
        <div :class="styles['carousel-text']">
          <h4 :class="styles['carousel-item-title']">{{ announcement.title }}</h4>
          <p :class="styles['carousel-item-text']">{{ announcement.content }}</p>
          <span :class="styles['carousel-time']">{{ announcement.time }}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 统计卡片 -->
  <div :class="styles['stats-grid']">
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">📊</div>
      <div :class="styles['stat-content']">
        <h3 :class="styles['stat-number']">5</h3>
        <p :class="styles['stat-label']">总考试数</p>
      </div>
    </div>
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">✅</div>
      <div :class="styles['stat-content']">
        <h3 :class="styles['stat-number']">3</h3>
        <p :class="styles['stat-label']">已完成</p>
      </div>
    </div>
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">⏳</div>
      <div :class="styles['stat-content']">
        <h3 :class="styles['stat-number']">2</h3>
        <p :class="styles['stat-label']">进行中</p>
      </div>
    </div>
    <div :class="styles['stat-card']">
      <div :class="styles['stat-icon']">🏆</div>
      <div :class="styles['stat-content']">
        <h3 :class="styles['stat-number']">85</h3>
        <p :class="styles['stat-label']">平均分</p>
      </div>
    </div>
  </div>

  <!-- 最近考试 -->
  <div :class="styles['section']">
    <h2 :class="styles['section-title']">最近考试</h2>
    <div :class="styles['exam-list']">
      <div :class="styles['exam-card']">
        <div :class="styles['exam-header']">
          <h3 :class="styles['exam-title']">Java基础考试</h3>
          <span :class="[styles['exam-status'], styles['completed']]">已完成</span>
        </div>
        <p :class="styles['exam-desc']">测试Java基础语法和面向对象编程知识</p>
        <div :class="styles['exam-meta']">
          <span :class="styles['exam-score']">得分: 92分</span>
          <span :class="styles['exam-date']">2024-01-15</span>
        </div>
      </div>
      <div :class="styles['exam-card']">
        <div :class="styles['exam-header']">
          <h3 :class="styles['exam-title']">数据库原理</h3>
          <span :class="[styles['exam-status'], styles['ongoing']]">进行中</span>
        </div>
        <p :class="styles['exam-desc']">数据库设计和SQL查询基础</p>
        <div :class="styles['exam-meta']">
          <span :class="styles['exam-time']">剩余时间: 45分钟</span>
          <span :class="styles['exam-progress']">进度: 60%</span>
        </div>
      </div>
      <div :class="styles['exam-card']">
        <div :class="styles['exam-header']">
          <h3 :class="styles['exam-title']">Spring框架</h3>
          <span :class="[styles['exam-status'], styles['upcoming']]">即将开始</span>
        </div>
        <p :class="styles['exam-desc']">Spring Boot和依赖注入</p>
        <div :class="styles['exam-meta']">
          <span :class="styles['exam-start']">开始时间: 2024-01-20 14:00</span>
          <span :class="styles['exam-duration']">时长: 90分钟</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 快速操作 -->
  <div :class="styles['section']">
    <h2 :class="styles['section-title']">快速操作</h2>
    <div :class="styles['action-grid']">
      <router-link to="/student/exam-list" :class="styles['action-btn']">
        <span :class="styles['action-icon']">📝</span>
        <span :class="styles['action-text']">开始考试</span>
      </router-link>
      <router-link to="/student/history" :class="styles['action-btn']">
        <span :class="styles['action-icon']">📚</span>
        <span :class="styles['action-text']">查看成绩</span>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import styles from '@/styles/student/dashboard.module.css'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const user = computed(() => authStore.user)

const announcements = ref([
  { id: 1, icon: '📢', title: '系统升级通知', content: '本周六晚22:00-24:00将进行系统维护，请提前保存好您的答题进度。', time: '2024-01-15 10:00' },
  { id: 2, icon: '🎉', title: '新功能上线', content: '考试错题本功能已上线，快去个人中心体验吧！', time: '2024-01-12 09:00' },
  { id: 3, icon: '⚠️', title: '考试须知', content: '考试期间请勿刷新页面，避免答题数据丢失。', time: '2024-01-10 08:00' }
])
const currentAnnouncementIndex = ref(0)

const prevAnnouncement = () => {
  currentAnnouncementIndex.value = (currentAnnouncementIndex.value - 1 + announcements.value.length) % announcements.value.length
}
const nextAnnouncement = () => {
  currentAnnouncementIndex.value = (currentAnnouncementIndex.value + 1) % announcements.value.length
}
</script>
